<template>
  <div>
    <div class="sidebar-list" @click="toggle(model)" :class="{active: activeName == model.menuName}">
      <router-link :to="model.href">
        <i v-if="isFolder" class="icon-arrow" :class="[open ? 'icon-arrow icon-arrow-open': 'icon-arrow']"></i>
        <i v-if="!isFolder" class="icon" :class="model.iconName"></i>
        <span>{{ model.menuName }}</span>
      </router-link>
    </div>
    <ul v-show="open" v-if="isFolder">
      <li class="sidebar-item" :class="{active: activeName == item.menuName}"  @click="active(item)" v-for="item in model.children" :key="item.id" :model="item">
        <router-link :to="item.href">
          <i :class="item.iconName"></i>
          <span>{{ item.menuName }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'treeMenu',
    props: ['model', 'activeName'],
    data () {
      return {
        open: false
      }
    },
    computed: {
      isFolder () {
        return this.model.children && this.model.children.length
      }
    },
    methods: {
      toggle: function (model) {
        if (this.isFolder) {
          this.open = !this.open
        }
        if(!!!model.children){
          this.$parent.activeName = model.menuName
        }
      },
      active: function (item) {
        this.$parent.activeName = item.menuName
      }
    }
  }
</script>
<style>
</style>
